<template>
  <div class="comment">
    <el-card class="box-card">
      <div class="comment_top">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="comment_content">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="title" label="文章标题" width="180">
          </el-table-column>
          <el-table-column
            prop="total_comment_count"
            label="总评论数"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="fans_comment_count" label="粉丝评论数">
          </el-table-column>

          <el-table-column prop="address" label="评论状态">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.comment_status"
                >正常</el-tag
              >
              <el-tag v-else>关闭</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                v-if="scope.row.comment_status"
                @click="clickKey(scope.row.ids, !scope.row.comment_status)"
                >关闭评论</el-button
              >

              <el-button
                type="danger"
                v-else
                @click="clickKey(scope.row.ids, !scope.row.comment_status)"
                >打开评论</el-button
              >
            </template>
          </el-table-column>

          {{ tableData.ids }}
        </el-table>
      </div>

      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-size="10"
          layout=" prev, pager, next"
          :total="pages.total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { commentList, commentStatus } from '../../api/comment'
export default {
  name: 'comment',
  created () {
    this.lists()
  },
  methods: {
    lists (val) {
      commentList({ page: val, response_type: 'comment' }).then(res => {
        console.log('comment', res)
        res.data.data.results.forEach(v => {
          if (typeof v.id === 'object') {
            v.ids = v.id.c
              .map((item, index) => {
                return item
              })
              .join('')
          } else {
            v.ids = v.id
          }
        })

        this.tableData = res.data.data.results

        this.pages.page = res.data.data.page
        this.pages.perpage = res.data.data.per_page
        this.pages.total = res.data.data.total_count
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.lists(val)
    },
    // 修改状态
    clickKey (id, val) {
      commentStatus(id, val).then(res => {
        console.log(res)
        this.tableData.forEach(item => {
          if (item.ids === id) {
            item.comment_status = res.data.data.allow_comment
          }
        })
      })
    }
  },
  data () {
    return {
      tableData: [],
      pages: {
        page: 1,
        perpage: '',
        total: 10
      }
    }
  }
}
</script>

<style lang="less" scoped>
.comment {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .comment_top {
    border-bottom: 1px solid #eee;
    height: 30px;
  }
  .el-card {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .block {
    margin: 20px auto 0;
    // text-align: center;
  }
}
</style>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
